<template>
  <view class="content">
	  <u-navbar :is-back="false" title="报销单详情"
	    title-size="30"
	    :background="{background:'#2B88FE' }"
	    title-color="#fff">
	    <div class="head_icon">
	      <u-icon @click="$api.handleBackTo"
	        name="arrow-left" color="#fff"
	        size="36">
	      </u-icon>
	      <u-icon @click="$api.handleHomeTo"
	        name="home" color="#fff" size="36">
	      </u-icon>
	    </div>
	  </u-navbar>	
    <view class="tedata x-row u-skeleton">
      <image :src="$api.UserImg(info.fUserId)" class="u-skeleton-circle"></image>
      <view class="x-col x-col-center">
        <view class="name_my u-skeleton-fillet">{{info.fUserName}}</view>
        <view class="datare u-skeleton-fillet" :style="{color:$api.getCheck(info.fStatus).color}">
          {{$api.getCheck(info.fStatus).name}}
        </view>
      </view>
    </view>

    <view class="laverdata">
      <view class="x-row u-skeleton-fillet">
        <view class="left_text x-col-center">审批编号</view>
        <view class="ruht_text x-col-center x-col">{{info.fId}}</view>
      </view>
      <view class="x-row u-skeleton-fillet">
        <view class="left_text">报销金额</view>
        <view class="ruht_text x-col">{{info.fMoney}} 元</view>
      </view>
      <view class="x-row u-skeleton-fillet">
        <view class="left_text">报销说明</view>
        <view class="ruht_text x-col">{{info.fContent}}</view>
      </view>
      <view class="x-row u-skeleton-fillet">
        <view class="left_text">图片</view>
        <view class="ruht_text x-col">
          <image @click="showImg(im)" :src="im" class="imgs" v-for="(im,idx) in info.fPics"
            :key="idx"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import approval from '../../components/approval'
export default {
  components: {
    approval
  },
  data() {
    return {
      info: '',
      id: '',
      loading: true
    }
  },
  onLoad(e) {
    uni.setNavigationBarTitle({
      title: '详情'
    })
    this.id = e.id
    this.getInfo()
  },
  methods: {
    showImg(e) {
      this.$api.previewImgs(this.info.imgs)
    },
    getInfo() {
      let that = this
      // user/Applyinfo 				报销明细
      this.$axios('api/WorkBill/GetDetail', 'post', { value: this.id }).then(res => {
        res.Value.fPics = res.Value.fPics.split(',').map(x => this.urlimg + x)
        that.info = res.Value
        that.loading = false
      })
    }
  }
}
</script>

<style scoped>
.tedata {
  padding: 40upx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}
.tedata image {
  width: 96upx;
  height: 96upx;
  display: block;
  border-radius: 50upx;
  margin-right: 25upx;
}
.name_my {
  color: #34404a;
  font-size: 36upx;
}
/* .datare{color:#FF930A; font-size: 30upx; padding-top: 10upx;} */

.laverdata {
  padding: 32upx;
  padding-bottom: 0;
}
.laverdata .x-row {
  margin-bottom: 25upx;
}
.left_text {
  color: #979797;
  font-size: 32upx;
  width: 180upx;
}
.ruht_text {
  color: #1b1919;
  font-size: 30upx;
}
.ruht_text .imgs {
  width: 128rpx;
  height: 128rpx;
  background: rgba(0, 0, 0, 0.09);
  border-radius: 16rpx;
  margin: 0 32rpx 32rpx 0;
}
</style>
